<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#d9eee3] box">
    <!-- 顶部Logo -->
    <Header />
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
      <h2 class="text-xl font-bold mb-4 text-2xl">
        How would you like to pay for your purchase?
      </h2>
      <!-- 支付选项 -->
      <div class="space-y-3 mb-6">
        <div
          class="p-4 rounded-lg cursor-pointer transition-all duration-200"
          :class="{
            'bg-[#477577] text-white': selectedOption === 'insurance',
            'bg-gray-100': selectedOption !== 'insurance',
          }"
          @click="selectedOption = 'insurance'"
        >
          <div class="flex items-center">
            <div
              class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center text-sm"
              :class="{
                'border-white bg-white': selectedOption === 'insurance',
                'border-gray-400': selectedOption !== 'insurance',
              }"
            >
              <el-icon
                v-if="selectedOption === 'insurance'"
                class="text-gray-600"
                ><Check
              /></el-icon>
            </div>
            <span class="">I want to use my insurance.</span>
          </div>
        </div>
        <div
          class="p-4 rounded-lg cursor-pointer transition-all duration-200"
          :class="{
            'bg-[#477577] text-white': selectedOption === 'self-pay',
            'bg-gray-100': selectedOption !== 'self-pay',
          }"
          @click="selectedOption = 'self-pay'"
        >
          <div class="flex items-center">
            <div
              class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center"
              :class="{
                'border-white bg-white': selectedOption === 'self-pay',
                'border-gray-400': selectedOption !== 'self-pay',
              }"
            >
              <el-icon
                v-if="selectedOption === 'self-pay'"
                class="text-gray-600"
                ><Check
              /></el-icon>
            </div>
            <span class="">I want to self-pay.</span>
          </div>
        </div>
      </div>
      <!-- 提示信息 -->
      <span
        v-if="selectedOption === 'insurance'"
        class="text-[#555555] mb-6 opacity-55"
      >
        Note: I authorize MyUTI to submit a claim to my insurance, and I agree
        to pay $199 for the UTI PCR testing if my insurance does not cover the
        cost. MyUTI does not bill insurance for STD or other testing.
      </span>
      <!-- 提交按钮 -->
      <div class="flex justify-center mt-8 items-center">
        <button
          v-if="selectedOption === 'insurance'"
          @click="handleSubmit('insurance')"
          class="insurance w-[220px] h-[60px] bg-[#477577] text-white py-3 !rounded-button hover:bg-red-700 transition-colors duration-200 rounded-[30px]"
        >
          Continue to Secure <br />
          Payment Portal
        </button>
        <button
          v-if="selectedOption === 'self-pay'"
          @click="handleSubmit"
          class="selfPay w-[220px] h-[60px] bg-[#477577] text-white py-3 !rounded-button hover:bg-red-700 transition-colors duration-200 rounded-[30px]"
        >
          Self Pay
        </button>
      </div>

      <!-- 底部Logo -->
      <!-- <div class="mt-8 text-center">
          <img
            :src="log"
            alt="GOPATH Diagnostics"
            class="mx-auto w-36"
          />
        </div> -->
    </div>
    <div class="mt-8 text-center">
      <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30" />
    </div>
  </div>
</template>
    <script lang="ts" setup>
import { ref } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from "@/assets/img/red-uti-logo.png";
import bottomlog from "@/assets/img/green-uti-logo.png";
import Header from "@/views/components/home-header.vue";
import { useRouter } from 'vue-router';
const router = useRouter();
const selectedOption = ref("insurance");
const handleSubmit = (type) => {
  console.log("Selected payment option:", selectedOption.value);
  if (selectedOption.value === "insurance") {
  } else if (selectedOption.value === "self-pay") {
  }
  router.push({
    path: '/patientInfo'
  })
};
</script>
<style scoped lang="less">
@import "@/assets/css/base.css";
.box {
    font-family: Bicyclette;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6f6f6f;
}
.insurance,
.selfPay {
  line-height: 1.2;
  font-weight: 700;
  font-size: 14px;
}
</style>
    